<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./no"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        window.onload = function () {

            var app5 = new Vue({
                el: '#app-5',
                data: {
                    message: 'Hello Vue.js!'
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            })


            var app_9 = new Vue({
                el: '#app-9',
                data: {
                    msg: '---'
                }
            })

            var nameArr = new Vue({
                el: '#tnameArr',
                data: {
                    items: [
                        { name: 'a' },
                        { name: 'b' },
                        { name: 'c' },
                    ]
                }
            })


            var ppp = new Vue({
                el: '#ppp',
                data: {
                    msg2: '**********'
                },
                methods: {
                    changeMSG: function () {
                        this.msg2 = this.msg2.split('').reverse().join(".");

                    }
                }
            })

            Vue.component('myCom', {
                template: '<h1>myCom</h1>'
            })


            var todo_itmeObj = Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            })

            var app10 = new Vue({
                el: '#app-10',
                data: {
                    todoList: [
                        { id: 0, text: '1' },
                        { id: 1, text: '2' },
                        { id: 2, text: '3' },
                        { id: 3, text: '4' }
                    ],
                    ab: 'ab'
                }
            })
            alert(todo_itmeObj.ab)

            var adt = new Vue({
                el: '#adt',
                template: '<h1></h1>',
                created() {
                    this.$el = '#adtt'
                },
            })



        }
    </script>
</head>

<body>
    <a :href='aaaaaa'>no href aaaa</a>

    <adt>aa</adt>
    <adtt>bb</adtt>


    <div id="app-10">
        <ol>
            <todo-item v-for="item in todoList" v-bind:todo="item" v-bind::key='item.id'></todo-item>
        </ol>
    </div>



    <myCom>myCom-1</myCom>

    <div id="app-5" style="background-color: aquamarine">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>

    <div id="app-9">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>



    <template id="tnameArr">
        <ul>
            <li v-for='item in items'>
                {{ item.name}}
            </li>
        </ul>
    </template>


    <template>
        <li>ssss</li>
    </template>

    <div>
        <li>s</li>
    </div>

    <div id="ppp">
        <p>{{msg2}}</p>
        <button v-on:click="changeMSG">touchme</button>

    </div>


</body>

</html>